<template>
    <div>
          <z-header class="header">购物车</z-header>

      
        <shopcart :cartList="cartList" @delcartitem="handDelCartItem" @changeCount="handChangeCount"></shopcart>
     
         <recommend class="recm-style"> </recommend>

        <van-submit-bar  
        @submit="onSubmit"
        class="submitBar" 
        :price="$store.getters.getCountPrice * 100" 
        button-text="提交订单">
          <van-checkbox 
          @click="handAllChecked"
          :value="allChecked"
          checked-color="#F63515">全选
          </van-checkbox>  
        </van-submit-bar>
    <tabbar :active="2" />
    </div>
</template>

<script>
import { mapState } from "vuex";
import { delCar,cartAdd } from "@/api";
// import {Divider } from 'vant'
// this.Vue.use(Divider )
import recommend from '@/components/common/recommend.vue'

import shopcart from './res/shopart-box.vue'

import zHeader from "@/components/common/z-header.vue";

import tabbar from "../../components/tabbar.vue";
    export default {
        components: {
            shopcart,
            tabbar,
            zHeader,
            recommend
            },
        data() {
            return {
                carList: [], // 存储购物车数据
                recommendList: [] // 存储推荐商品
            }
        },
         computed: {
           ...mapState(["cartList", "allChecked"]),
         },
        created() {
              this.getcardata();
        },
        methods: {
       
            getcardata(){
                this.$store.dispatch('getCartData')
            },
            onSubmit() {
               console.log("submit");
             },
              // 全选 或 取消全选
            handAllChecked() {
              console.log("取消全选 或 全选");
              this.$store.dispatch("changeAllChecked");
            },
            handDelCartItem(item) {
              // console.log(item);
              delCar({ id: item.id }, (res) => {
                if (res.status === 0) {
                  console.log(res);
                  console.log("删除成功！");
                  // 删除成功 之后 再次获取 购物车数据
                  this.cartData();
                }
              });
            },

            // 购物车数据 步进器 点击了 加号减号并更后的事件
            handChangeCount(params) {
              console.log(params);
              cartAdd(params, res => {
                console.log(res);
              })
            },
       
            delcarfunc(val){
                console.log('val',val);
                console.log('进入到delcarfunc方法');
                 delCar({id:val.id},res => {
                    if (res.status == 0) {
                        console.log(res);
                        // instance.close();
                        console.log('删除成功');
                        location.href='/shopcar'

                    } else {
                        this.$toast(res.msg)
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>

@import "@/components/style/mixin.scss";

.recm-style {
  padding-bottom: 50px;
}
.page {
  background-color: #f7f7f7;
  padding: 0;
  .van-submit-bar {
    bottom: 100px;
    background-color: #f7f7f7;
  }
}
.submitBar{
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 68px;
    button{
        margin-left: 30px;
    }
}
.shopcart-page{
    margin-top:100px
}
.recommend {
    margin-bottom: 100px;
    .recommend-list {
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;

        .recommend-item {
            display: flex;
            flex-direction: column;
            width: 50%;
            padding: 20px;
            @include boxSizing;
            border-bottom: 1px solid #dcdcdc;

            &:nth-child(2n-1) {
                border-right: 1px solid #dcdcdc;
            }

            img {
                width: 100%;
                height: 290px;
                margin: 0 auto;
            }

            p {
                height: 60px;
                padding: 20px 0;
                font-size: 26px;
                line-height: 40px;
                color: #333;
                overflow: hidden;
            }

            i {
                font-style: normal;
                font-size: 32px;
                color: $red;
            }
        }
    }
}
</style>